<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="base/page/header :: headerTiFragment" />

<body>
	<div th:include="base/page/menu-user :: menuTiFragment"></div>

	<div class="container">
		<fieldset>
			<legend class="text-info">List of Time Frame</legend>
			<div>
				<table class="table">
					<thead>
						<tr>
							<th>No</th>
							<th>Name</th>
							<th>Total Days</th>
							<th>Status</th>
							<th class="text-center">Operation</th>
						</tr>
					</thead>
					<tbody>
						<tr th:each="timeframe,rowStat : ${timeframes.list}">
							<td th:text="${rowStat.count}"/>
							<td th:text="${timeframe.timeFrameName}"/>
							<td th:text="${timeframe.startDate} == ${timeframe.endDate} ? '1' : ${beans.formatHelper.daysBetween(beans.formatHelper.formatDate(timeframe.startDate), beans.formatHelper.formatDate(timeframe.endDate))}"/>
							<td th:text="${beans.formatHelper.daysBetween(currentDate, beans.formatHelper.formatDate(timeframe.endDate))} == 0 ? 'Finish' : 'In Progress'"/>
							<td class="text-center">
								<a th:href="@{'/base/page/user/bar?timeframeId=' + ${timeframe.uuid}}" title="View Chart"><i class="icon-bar-chart"></i></a>
              					<a th:href="@{'/base/page/user/detail?timeframeId=' + ${timeframe.uuid}}" title="Detail"><i class="icon-check"></i></a>							 	
							</td>
						</tr>
					</tbody>
				</table>

				<div class="row">				
					<div th:if="${totalPage} &gt; 1" class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 pull-right">							
						<div class="btn-group pull-right">
							<ul class="pagination">
								<li th:if="${page} &gt; 1"><a class="btn" th:href="@{'/base/page/user/list/' + ${max} + '/1'}" title="First Page">&laquo;</a></li>
								<li th:each="i : ${#numbers.sequence(1, totalPage)}" th:class="${i} == ${page} ? 'active'"><a th:href="@{'/base/page/user/list/' + ${max} + '/' + ${i}}" th:title="'Page' + ${i}"><span th:text="${i}"></span></a></li>
								<li th:if="${page} &lt;  ${totalPage}"><a class="btn" th:href="@{'/base/page/user/list/' + ${max} + '/' + ${totalPage}}" title="Last Page">&raquo;</a></li>
							</ul>
						</div>
					</div>					
				</div>
				<div class="row">
					<div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 pull-right">
						<span class="pull-right">Found <span th:text="${timeframes.rowCount}"></span> Row(s)</span>					
					</div>
				</div>
			</div>
		</fieldset>
	</div>
</body>
</html>